// 概况
<template>
  <div class="general-total">
    <!-- 标题 -->
    <div class="shop-name">
      <span><b>GAOGAO的小店</b></span>
      <span class="shopNameText">试用期</span>
      <span class="shopNameText">有赞担保</span>
    </div>
    <!-- 新手任务 -->
    <div class="task">
      <div class="task-text">
        <span><b class="headings">新手任务</b></span>
        <el-link class="headingsA" type="primary">更多任务</el-link>
      </div>
      <!-- 创建店铺 -->
      <div class="externalStyle1">
        <p>创建店铺</p>
        <p class="text1">注册有赞账号，并成功创建第阿奴，即算完成任务</p>
        <div class="task-div1" clear>
          <div class="div1">
            <span class="text1">奖励：+5 有赞币</span>
          </div>
          <div class="div2">
            <button class="div2-btn1">查看教程</button>
            <button class="div2-btn2">领取奖励</button>
          </div>
        </div>
      </div>
      <!-- 订单信息 -->
      <div class="externalStyle2">
        <div>
          <p class="red">1</p>
          <span>待发货订单</span>
        </div>
        <div>
          <p>0</p>
          <span>维权订单</span>
        </div>
        <div>
          <p>0</p>
          <span>昨日订单</span>
        </div>
        <div>
          <p>￥0.00</p>
          <span>昨日交易额</span>
        </div>
        <div>
          <p>￥0.00</p>
          <span>可提现余额</span>
        </div>
      </div>
    </div>
    <!-- 常用功能 -->
    <div class="functions">
      <div class="functions-text">
        <span><b class="headings">常用功能</b></span>
      </div>
      <div class="functions-funcs">
        <div class="funcs" clear>
          <div v-for="(item, index) in functions" :key="index">
            <img :src="item.imgUrl" />
            <span>{{ item.text }}</span>
          </div>
        </div>
        <div class="funcs" clear>
          <div v-for="(item, index) in functions1" :key="index">
            <img :src="item.imgUrl" />
            <span>{{ item.text }}</span>
          </div>
        </div>
      </div>
      <div class="functions-bottom">
        <img src="../assets/img/minSmall9.png" alt="" />
        <span
          >功能上新：微商城上线打印方案模块，对接小票打印机（WiFi打印机和蓝牙打印机），多网点下也支持打印方案模块，减少漏单可能！</span
        >
      </div>
    </div>
    <!-- 营销应用 -->
    <div class="marketing-application">
      <div class="marketing">
        <span><b class="headings">营销应用</b></span>
        <el-link class="headingsA" type="primary">营销中心</el-link>
      </div>
      <div class="application" clear>
        <div
          v-for="(item, index) in marketing"
          :key="index"
          :class="item.color"
          class="application-class"
        >
          <p class="marketing-maxText">{{ item.text }}</p>
          <span class="marketing-minText">{{ item.text1 }}</span>
        </div>
      </div>
    </div>
    <!-- 更多服务 -->
    <div class="more-service">
      <div class="more-text">
        <span><b class="headings">更多服务</b></span>
      </div>

      <div class="more-class" clear>
        <div
          class="gongtongStyle"
          v-for="(item, index) in moreText"
          :key="index"
        >
          <div><img :src="item.imgUrl" /></div>
          <span>{{ item.text }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "GeneralView",
  data() {
    return {
      functions: [
        { text: "微信", imgUrl: require("../assets/img/minSmall1.png") },
        { text: "发布商品", imgUrl: require("../assets/img/minSmall2.png") },
        { text: "页面管理", imgUrl: require("../assets/img/minSmall3.png") },
        { text: "客服系统", imgUrl: require("../assets/img/minSmall4.png") },
        { text: "优惠券", imgUrl: require("../assets/img/minSmall5.png") },
      ],
      functions1: [
        { text: "微信小程序", imgUrl: require("../assets/img/minSmall6.png") },
        { text: "分销员", imgUrl: require("../assets/img/minSmall7.png") },
        { text: "收入/提现", imgUrl: require("../assets/img/minSmall3.png") },
        { text: "扫码付款", imgUrl: require("../assets/img/minSmall3.png") },
        { text: "帮助中心", imgUrl: require("../assets/img/minSmall8.png") },
      ],
      marketing: [
        {
          text: "多人拼团",
          text1: "裂变式营销玩法",
          color: "marketing-color1",
        },
        {
          text: "发券宝",
          text1: "拉新裂变促活精准营销",
          color: "marketing-color2",
        },
        {
          text: "分销市场",
          text1: "一键上架 快速补充资源",
          color: "marketing-color3",
        },
        {
          text: "有赞小程序",
          text1: "一键生成抢占先机",
          color: "marketing-color4",
        },
      ],
      moreText: [
        {
          id: 1,
          text: "我要推广",
          imgUrl: require("../assets/img/small1.png"),
        },
        {
          id: 2,
          text: "分销市场",
          imgUrl: require("../assets/img/small2.png"),
        },
        {
          id: 3,
          text: "全员开店",
          imgUrl: require("../assets/img/small3.png"),
        },
        { id: 4, text: "收银", imgUrl: require("../assets/img/small4.png") },
        { id: 5, text: "零售", imgUrl: require("../assets/img/small5.png") },
        {
          id: 6,
          text: "应用市场",
          imgUrl: require("../assets/img/small6.png"),
        },
        { id: 7, text: "APP开店", imgUrl: require("../assets/img/small7.png") },
        { id: 8, text: "有赞", imgUrl: require("../assets/img/small8.png") },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
// 公共样式
// 小标题
.headings {
  width: 70px;
  height: 39px;
  // left: 131px;
  // top: 127px;
  color: rgba(80, 80, 80, 1);
  font-size: 14px;
  line-height: 150%;
  text-align: left;
  font-weight: bold;
}
.headingsA {
  width: 70px;
  height: 39px;
  color: rgba(42, 130, 228, 1);
  font-size: 12px;
  line-height: 150%;
  text-align: left;
}
.text1 {
  color: rgba(128, 128, 128, 1);
  font-size: 12px;
  line-height: 150%;
  text-align: left;
}

//
.general-total {
  background-color: #fff;
  padding: 0 20px;
  // 标题
  .shop-name {
    padding-top: 20px;
    span {
      margin-right: 5px;
    }
    .shopNameText {
      width: 44px;
      height: 18px;
      left: 277px;
      top: 75px;
      color: rgba(42, 130, 228, 1);
      border-radius: 2px;
      font-size: 12px;
      line-height: 150%;
      border: rgba(42, 130, 228, 1) solid 1px;
      text-align: center;
    }
  }
  // 新手任务
  .task {
    padding: 40px 0;
    .externalStyle1 {
      padding: 15px;
      height: 150px;
      margin: 20px 0;
      background-color: #f3f3f3;
      .task-div1 {
        margin-top: 80px;
        .div1 {
          float: left;
        }
        .div2 {
          float: right;
          .div2-btn1 {
            width: 70px;
            height: 31px;
            color: #383838;
            background-color: #ffffff;
            border: #a6a6a6 solid 1px;
            border-radius: 2px;
            font-size: 12px;
            line-height: 150%;
            text-align: center;
          }
          .div2-btn2 {
            width: 70px;
            height: 31px;
            color: #ffffff;
            background-color: #3288ff;
            border: #a6a6a6 solid 1px;
            border-radius: 2px;
            font-size: 12px;
            line-height: 150%;
            text-align: center;
            margin-left: 10px;
          }
        }
      }
    }
    .externalStyle2 {
      padding: 15px;
      height: 150px;
      margin: 20px 0;
      background-color: #f3f3f3;
      div {
        padding-top: 45px;
        float: left;
        width: 20%;
        text-align: center;
        .red {
          color: #f55e5e;
        }
        p {
          height: 36px;
          color: #2a82e4;
          font-size: 28px;
          line-height: 150%;
        }
      }
    }
  }
  //常用功能
  .functions {
    // padding-bottom: 20px;
    background-color: #f3f3f3;
    .functions-text {
      padding-bottom: 15px;
      background-color: #fff;
    }
    .functions-funcs {
      height: 130px;
      .funcs {
        div {
          padding: 20px;
          float: left;
          width: 20%;
          background-color: #f3f3f3;
          border-top: #fff solid 1px;
          border-right: #fff solid 1px;
          box-sizing: border-box;
          img {
            width: 22px;
            height: 22px;
            margin-right: 10px;
            vertical-align: middle;
          }
          span {
            vertical-align: middle;
          }
        }
      }
    }
    .functions-bottom {
      background-color: #f3f3f3;
      img {
        vertical-align: middle;
      }
      span {
        vertical-align: middle;
      }
      padding: 10px 20px;
    }
  }
  // 营销应用
  .marketing-application {
    height: 150px;
    padding: 40px 0;
    .application {
      text-align: center;
      .application-class {
        // background-color: #f55e5e;
        width: 25%;
        height: 115px;
        // float: left;
        display: inline-block;
        padding: 35px 32px;
        border-left: #fff solid 5px;
        box-sizing: border-box;
      }
      :nth-child(1) {
        border-left: #fff solid 0px;
      }
    }
  }
  // 更多服务
  .more-service {
    padding-bottom: 20px;
    .more-text {
      margin-bottom: 10px;
    }
    .more-class {
      .gongtongStyle {
        width: 12.5%;
        text-align: center;
        display: inline-block;
        margin: 0 auto;
      }
    }
  }
}

// 营销应用
// 渲染背景颜色
.marketing-color1 {
  background-color: #84c884;
}
.marketing-color2 {
  background-color: #79b5ca;
}
.marketing-color3 {
  background-color: #7991ca;
}
.marketing-color4 {
  background-color: #ca79bd;
}
// 字体
.marketing-maxText {
  height: 30px;
  color: #ffffff;
  font-size: 20px;
  line-height: 150%;
}
.marketing-minText {
  height: 30px;
  color: rgba(255, 255, 255, 1);
  font-size: 13px;
  line-height: 150%;
}
</style>